<!--工牌-->
<template>
  <div class="card-box">
    <div class="audit-pass">
      <div class="logo"></div>
      <div class="con-box auditContent">
        <div class="headerImg">
          <img :src="fillUrl+'/'+headerImg">
        </div>
        <div class="name">{{info.name}}</div>
        <ul>
          <li>
            <em>工号</em>
            <span>{{info.jobNumber}}</span>
          </li>
          <li>
            <em>岗位</em>
            <span>{{info.position}}</span>
          </li>
          <li>
            <em>电话</em>
            <span>{{info.phone}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { fileURL } from "@/utils/config";
export default {
  name: '',
  props: {
    info: {
      type: Object,
      default: () => { }
    },
    headerImg: {
      type: String,
      default: ''
    }
  },
  components: {

  },
  data () {
    return {
      formData: {
        id: null,
        openid: '',
        jobNumber: '',
        position: '',
        name: '',
        phone: '',
        imgPath: '',
      },
      fillUrl: fileURL,
    };
  },
  async onShow () {
  },
  async onLoad (e) {
    var vm = this;
  },
  created () { },
  async onUnload () {
  },
  methods: {

  },
  mounted () {
  },
};
</script>

<style lang="scss" scoped>
@import "../../static/css/module.scss";
.card-box {
  height: 100%;
  .audit-pass {
    height: 100%;
    .logo {
      height: 70px;
      margin: 16px 0 0 14px;
      background: url("../../static/image/chinaGasLogo.png") left center
        no-repeat;
      background-size: 38%;
      position: relative;
    }
    width: 100%;
    overflow: hidden;
    background: url("https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/icon/auditBj.png")
      center 36% no-repeat;
    background-size: contain;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 280px;
      background: #1462ff;
      z-index: 0;
    }
    .con-box {
      box-shadow: 0 6px 10px #acacac;
    }
    .auditContent {
      height: calc(100% - 200px);
      margin: 100px 14px 0;
      box-sizing: border-box;
      position: relative;
      z-index: 1;
      background: #fff
        url("https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/icon/auditCardBj.png")
        center bottom no-repeat;
      background-size: 100%;
      border-radius: 20px;
      padding-top: 120px;
      box-sizing: border-box;
      // &::before {
      //   content: "";
      //   position: absolute;
      //   left: 0;
      //   top: -6px;
      //   width: 90%;
      //   height: 60px;
      //   box-sizing: border-box;
      //   border-top: 60px solid #1462ff;
      //   transform-origin: bottom center;
      //   transform: rotateZ(-15deg) scale(1.414);
      //   animation: slash 5s infinite ease;
      // }
      .headerImg {
        width: 160px;
        height: 160px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 0 0 6px #fff, 0 0 0 14px rgba(162, 162, 162, 0.2);
        // border: 8px solid rgba(255, 255, 255, 1);
        // box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
        overflow: hidden;
        position: absolute;
        top: -80px;
        left: 50%;
        transform: translate(-50%, 0);
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .name {
        text-align: center;
        font-size: 28px;
        color: #1462ff;
      }
      ul {
        width: 42%;
        margin: 30px auto 0;
        font-size: 15px;
        color: #444;
        line-height: 34px;
        padding: 0;
        li {
          padding-bottom: 12px;
          &:last-child {
            padding: 0;
          }
        }
        em,
        span {
          font-style: normal;
          display: block;
        }
        em {
          font-size: 15px;
          color: #888;
        }
        span {
          font-size: 20px;
          color: 222;
        }
      }
    }
  }
}
</style>
<style>
page {
  width: 100%;
  height: 100%;
}
</style>